<template>
    <y-layout title="Tab">
        <div class="demo-tab-title">普通使用</div>
        <y-tab>
            <y-tab-panel label="选项一">土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。</y-tab-panel>
            <y-tab-panel label="选项二">我需要三件东西：爱情友谊和图书。然而这三者之间何其相通！炽热的爱情可以充实图书的内容，图书又是人们最忠实的朋友。</y-tab-panel>
            <y-tab-panel label="选项三">时间是一切财富中最宝贵的财富。</y-tab-panel>
            <y-tab-panel label="选项四">真理惟一可靠的标准就是永远自相符合。</y-tab-panel>
        </y-tab>

        <div class="demo-tab-title">设置初始，手动切换</div>
        <y-tab v-model="tab1">
            <y-tab-panel label="选项一">111111</y-tab-panel>
            <y-tab-panel label="选项二">222222 - 【设置初始激活项】</y-tab-panel>
            <y-tab-panel label="选项三">333333</y-tab-panel>
            <y-tab-panel label="选项四">444444</y-tab-panel>
        </y-tab>

        <y-button-group>
            <y-button size="large" @click.native="tab1 = 2" type="warning" style="height: 40px;font-size: 15px;">go to 3</y-button>
        </y-button-group>

        <div class="demo-tab-title">多个选项卡，左右滑动</div>
        <y-tab horizontal-scroll>
            <y-tab-panel label="选项一">111111</y-tab-panel>
            <y-tab-panel label="选项二">222222</y-tab-panel>
            <y-tab-panel label="选项三">333333</y-tab-panel>
            <y-tab-panel label="选项四">444444</y-tab-panel>
            <y-tab-panel label="选项五">555555</y-tab-panel>
            <y-tab-panel label="选项六">666666</y-tab-panel>
            <y-tab-panel label="选项七">777777</y-tab-panel>
            <y-tab-panel label="选项八">888888</y-tab-panel>
        </y-tab>

        <div class="demo-tab-title">异步获取数据</div>
        <y-tab v-model="tab2" :callback="fn" :prevent-default="false" :item-click="itemClick">
            <y-tab-panel v-for="item in items" :label="item.label">{{item.content}}</y-tab-panel>
        </y-tab>

        <div class="demo-tab-title">添加标识</div>
        <y-tab>
            <y-tab-panel label="选项一">aaaaa</y-tab-panel>
            <y-tab-panel label="选项二" badge="2">bbbbb</y-tab-panel>
            <y-tab-panel label="选项三" dot>cccc</y-tab-panel>
            <y-tab-panel label="选项四">dddd</y-tab-panel>
        </y-tab>

        <div class="demo-tab-title">自定义外观</div>
        <y-tab bg-color="#F00" color="#FFF" border-color="#000" active-color="#000" height="1.2rem" font-size=".36rem">
            <y-tab-panel label="选项一">aaaaa</y-tab-panel>
            <y-tab-panel label="选项二">bbbbb</y-tab-panel>
            <y-tab-panel label="选项三">cccc</y-tab-panel>
        </y-tab>
    </y-layout>
</template>

<script>
    export default {
        data() {
            return {
                tab1: 1,
                tab2: 0,
                items: [
                    {label: '选项一', content: 'aaaaaaaaaaa'},
                    {label: '选项二', content: 'bbbbbbbbbbb'},
                    {label: '选项三', content: 'ccccccccccc'},
                    {label: '选项四', content: 'ddddddddddd'}
                ]
            }
        },
        methods: {
            fn(label, key) {
                console.log(label, key);
            },
            itemClick(key) {
                console.log(key);
                this.$dialog.loading.open(`数据加载ing...`);
                setTimeout(() => {
                    this.tab2 = key;
                    this.$dialog.loading.close();
                    this.items[key].content = `新内容 ${key+1}/${new Date().getTime()}`
                }, 1000);
            }
        }
    }
</script>
